<template>
  <div v-drag>
    <div class="mask"  @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>用户信息详情</p>
        <i  @click="closePopup(false)"></i>
      </div>
      <div class="box_body" >
        <div class="line">
          <span class="lab">用户名称：</span>
          <div> {{remark ? `${userName} (${remark}) ` : userName}} </div>
        </div>
        <div class="line">
          <span class="lab">头像：</span>
          <div>
            <img :src="photo" class="avatar" v-if="photo" alt="tzs">
            <p v-else>——</p>
          </div>
        </div>
        <div class="line">
          <span class="lab">历史充值金额：</span>
          <div class="money">{{money}}元 </div>
        </div>
        <div class="line">
          <span class="lab">历史开票金额：</span>
          <div class="money">{{balance}}元</div>
        </div>

        <div class="line">
          <span class="lab">可使用总额度：</span>
          <div class="money">{{data.userAuth? data.userAuth :0}}</div>
        </div>

        <div class="line">
          <span class="lab">已使用总额度：</span>
          <div class="money">{{data.userAuthUsed ? data.userAuthUsed :0}}</div>
        </div>

        <div class="line">
          <span class="lab">已使用额度比例：</span>
          <div class="money">{{data.authRatio ? finalNum(data.authRatio) : 0}}%</div>
        </div>

        <div class="line">
          <span class="lab">已付押金桶数：</span>
          <div class="money">{{data.pledge ? data.pledge :0}}桶</div>
        </div>

        <div class="line">
          <span class="lab">用户手上桶数：</span>
          <div class="money">{{data.productNum ? data.productNum :0}}桶</div>
        </div>

        <div class="line">
          <span class="lab">已付押金/未付押金桶：</span>
          <div class="money">{{data.pledgeRatio ? finalNum(data.pledgeRatio) : 0}}%</div>
        </div>

        <div class="line">
          <span class="lab">所属销售：</span>
          <div class="success_btn">{{refereeName?refereeName:'——'}}</div>
        </div>

        <div class="line">
          <span class="lab">登录次数：</span>
          <div>{{loginTimes?loginTimes:0}}</div>
        </div>
        <div class="line">
          <span class="lab">最后登录时间：</span>
          <div class="time">{{lastLoginDate?lastLoginDate:'——'}}</div>
        </div>
        <div class="line">
          <span class="lab">当前状态：</span>
          <div>
            <el-radio-group v-model="proStatus" disabled>
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">冻结</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="closePopup(false)">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getDetail} from "@/api/data/user";
import commons from "../../../utils/common";

export default {
  props:['userId'],
  data(){
    return {
      photo: '',
      userName: '',
      loginTimes: '',
      lastLoginDate:'',
      typeOptions:[],
      proStatus: 1,
      money:'',
      balance:'',
      loading:false,
      refereeName:'',
      remark:'',
      data:{}
    }
  },
  mounted() {
    if (this.userId){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      let that = this;
      that.loading = true;
      getDetail(that.userId).then(res => {
        if (res){
          that.setData(res);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },
    //数值超过两位小数时候保留两位小数
    finalNum(item) {
      item = item * 100;
      var  y = String(item).indexOf( "." ) + 1;
      if (y > 0) {
        return parseFloat(item.toFixed(2));
      }  else  {
        return item;
      }
    },
    setData(obj){
      this.userName = obj.wxName?obj.wxName:'';
      this.photo = obj.wxPhoto?obj.wxPhoto:'';
      this.proStatus = obj.enable?obj.enable:0;
      this.loginTimes = obj.loginTimes?obj.loginTimes:0;
      this.lastLoginDate = obj.lastLoginDate ?commons.formatTime(obj.lastLoginDate):'';
      this.money = obj.money?obj.money:0;
      this.balance = obj.balance?obj.balance:0;
      this.refereeName = obj.refereeName ? obj.refereeName:0;
      this.remark = obj.remark ?  obj.remark : '';
      this.data = obj;
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
 .avatar {
   width: 70px;
   height: 70px;
   border-radius: 8px;
   overflow: hidden;
 }
 .money {
   color: #f7ab20
 }
 .time {
   color:#e40000
 }
 .line .lab {
   width:170px !important;
 }
</style>
